<template>
  <div class="chushe">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审批</el-breadcrumb-item>
      <el-breadcrumb-item>试点项目申报预审数据局</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="serach">
      <el-form
        :inline="true"
        :model="searchForm"
        label-width="104px"
        class="serachForm"
        ref="serachForm"
      >
        <el-form-item label="项目名称">
          <el-input
            v-model="searchForm.projectName"
            placeholder="请输入项目/规划的关键字/编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="资金来源">
          <el-select
            v-model="searchForm.capitalSource"
            placeholder="选择资金来源"
          >
            <el-option
              label="民政局"
              value="民政局"
            ></el-option>
            <el-option
              label="公安局"
              value="公安局"
            ></el-option>
            <el-option
              label="财政局"
              value="财政局"
            ></el-option>
            <el-option
              label="国税局"
              value="国税局"
            ></el-option>
            <el-option
              label="土地局"
              value="土地局"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-select
            v-model="searchForm.region"
            placeholder="选择审批状态"
          >
            <el-option-group
              v-for="item in options"
              :key="item.label"
              :label="item.label"
            >
              <el-option
                v-for="group in item.options"
                :key="group.value"
                :label="group.label"
                :value="group.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="上报时间">
          <el-date-picker
            v-model="searchTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="serachBtn">
        <el-button-group>
          <el-button
            @click="getList()"
            type="primary"
          >查询</el-button>
          <el-button
            type="plain"
            @click="resetForm('serachForm')"
          >重置</el-button>
        </el-button-group>
      </div>
    </div>
    <div class="container">
      <el-table
        :data="tableData"
        style="width: 100%"
        @sort-change="onSortChange"
      >
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectNo"
          label="项目编号"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectBudget"
          sortable="custom"
          label="项目概算"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color: #CC3322">{{scope.row.projectBudget}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectCategoryName"
          label="项目类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="capitalSource"
          label="资金来源"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="capitalSource"
          sortable="custom"
          label="上报时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="currentState"
          label="审批状态"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{scope.row.currentState}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="handleClick(scope.row, 'view')"
              size="small"
            >查看</el-link>
            <template v-if="scope.row.currentState !== 102">
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="primary"
                @click="handleClick(scope.row, 'edit')"
                size="small"
              >编辑</el-link>
            </template>
            <template v-if="scope.row.currentState !== 102">
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="primary"
                @click="handleClick(scope.row, 'edit')"
                size="small"
              >提交</el-link>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.pageTotal"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            options: [
                {
                    label: "",
                    options: [
                        {
                            value: 99,
                            label: "可研通过"
                        },
                        {
                            value: 100,
                            label: "初设通过"
                        },
                        {
                            value: 101,
                            label: "初设草稿"
                        },
                        {
                            value: 102,
                            label: "初设已提交"
                        }
                    ]
                },
                {
                    label: "初设A",
                    options: [
                        {
                            value: 30,
                            label: "规划处联合评审(处领导)"
                        },
                        {
                            value: 31,
                            label: "批复(处领导)"
                        }
                    ]
                },
                {
                    label: "初设B",
                    options: [
                        {
                            value: 40,
                            label: "专业技术委员会审查"
                        },
                        {
                            value: 41,
                            label: "规划处联合评审(处领导)"
                        },
                        {
                            value: 42,
                            label: "批复(处领导)"
                        }
                    ]
                },
                {
                    label: "初设C",
                    options: [
                        {
                            value: 50,
                            label: "专家咨询委员会审查"
                        },
                        {
                            value: 51,
                            label: "规划处联合评审(处领导)"
                        },
                        {
                            value: 52,
                            label: "批复(处领导)"
                        }
                    ]
                }
            ],
            currentPage: 1,
            searchForm: {},
            searchTime: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    }
                ]
            },
            tableData: [],
            pageData: {
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                type: 2
            }
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList(page) {
            if (page) {
                this.pageData.pageNum = page;
            }
            let params = Object.assign(this.pageData, this.searchForm);
            if (this.searchTime && this.searchTime.length > 0) {
                params["planBeginTime"] = this.searchTime[0];
                params["planEndTime"] = this.searchTime[1];
            }
            this.axios.get("/projectProcess/getList", { params }).then(res => {
                this.tableData = res.data.records;
                this.pageData.pageTotal = res.data.total;
            });
        },
        handleClick(row, type) {
            if (type == "view") {
                this.$router.push({
                    name: "companyshujujuDetail",
                    query: { id: row.processId, pid: row.processInstanceIdCs }
                });
            } else {
                this.$router.push({
                    name: "addChushe",
                    query: { id: row.processId }
                });
            }
        },
        handleSizeChange(value) {
            this.pageData.pageSize = value;
            this.getList();
        },
        handleCurrentChange(value) {
            this.getList(value);
        },
        add() {
            this.$router.push({ name: "addCompanyshujuju" });
        },
        resetForm(formName) {
            this.searchTime = [];
            this.searchForm = {};
        },
        onSortChange(target) {
            const { order, prop } = target;
            console.log(order, prop)
            if (prop === "projectBudget") {
                if (order === "ascending") {
                    this.searchForm.orderFlag = 1;
                } else if (order === "descending") {
                    this.searchForm.orderFlag = 2;
                } else {
                    this.searchForm.orderFlag = "";
                }
            }
            this.page = 1;
            this.getList();
        }
    }
};
</script>

<style lang="less" scoped>
.chushe {
  .serach {
    padding-top: 20px;
    display: flex;
    .serachBtn {
      padding: 20px 0;
      width: 158px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #edf0fa;
    }
    .serachForm {
      padding: 20px 0;
      flex: 1;
      background-color: #fff;
    }
  }
  .el-input--small {
    width: 176px !important;
  }

  .container {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    .addBtn {
      margin-bottom: 20px;
    }
    .page {
      padding-top: 20px;
      text-align: right;
    }
  }
}
</style>
